<!-- 表格自动滚动的组件 -->
<template>
    <!-- 表格模板滚动组件 -->
    <component :is="chartBorderComponent[formatData.border]"
        :color="[formatData.borderColor1, formatData.borderColor2]">
       <!-- <div class="show-table" :style="{padding:formatData.padding,boxSizing: 'border-box'}"> -->
       <div class="show-table" >

        <div v-menus:right="menus" class="title"
            :style="{ textAlign: formatData.title.textAlign, paddingRight: formatData.title.paddingRight, paddingLeft: formatData.title.paddingLeft, lineHeight: formatData.title.height, height: formatData.title.height, fontSize: formatData.title.fontSize, color: formatData.title.color, backgroundColor: formatData.title.backgroundColor, fontWeight: formatData.title.fontWeight }">
            {{ formatData.title.text }}
        </div>
        <div v-menus:right="menus" class="scroll-table" :style="{
            height: 'calc( 100% - ' + formatData.title.height + ')'
        }">
                <el-table :style="{
                '--hover-background-color': formatData.hoverBackgroundColor, '--color': formatData.color, '--font-size': formatData.fontSize, height: '100%',width:'100%'
            }" :header-row-style="headerRowStyle" :row-style="tableRowStyle"
                    header-row-class-name="table-header-row-class-name" row-class-name="table-row-class-name"
                    class="custom-table" ref="tableRef" :data="tableData" :border="false" style="width: 100%;height: 100%;">
                    <template v-for="(itm, index) in formatData.tableFiled" :key="index">
                        <el-table-column align="center" header-align="center" v-if="itm.prop == 'index'" type=index
                            show-overflow-tooltip :label="itm.label" :width="itm.width > 0 ? itm.width : 'auto'" />
                        <el-table-column align="center" header-align="center" v-else :prop="itm.prop" show-overflow-tooltip
                            :label="itm.label" :width="itm.width > 0 ? itm.width : 'auto'" />
                    </template>
                </el-table>
        </div>
        <config ref="refConfig" @propsDataEv="propsDataEv" />
       </div>
       
    </component>
</template>

<script setup>
import { ref, onMounted, inject, shallowRef, onUnmounted, computed } from 'vue'
import { myScale } from '@/utils/myScale.js'
import config from '@/components/chart/table/config.vue'
import { chartBorderComponent } from '@/utils/chart.js'
import { ChartGetDataListPost } from '@/api/chart/index.js'


const emit = defineEmits(['aaaa', 'emitGetDataEv'])
const refConfig = ref(null)
const props = defineProps(['data','modelType','modelRow'])

const provideGlobalConfigEv = inject('provideGlobalConfigEv');
const provideModelConfigEv = inject('provideModelConfigEv');

const menus = shallowRef({
    menus: [
        {
            label: "模板配置",
            tip: '修改当前模板配置',
            click: () => {
                refConfig.value.drawer = true
                refConfig.value.data
                refConfig.value.resetData(props.data)
                return true;
            }
        },
        {
            label: "模块配置",
            tip: '修改当前模块板配置',
            click: () => {
                console.log('点击显示表格配置',props)
                provideModelConfigEv(props.modelType,props.modelRow)
                return true;
            }
        },
        {
            label: "全局配置", tip: '修改全局配置', click: () => {
                console.log('点击显示面板配置')
                provideGlobalConfigEv()
                return true;
            }
        }
    ]
})

const formatData = computed(() => {

    return formatDataEv(props.data)
})

const formatDataEv = (val) => {
    let data_z = JSON.parse(JSON.stringify(val))
    data_z.title.fontSize = myScale(data_z.title.fontSize) + 'px'
    data_z.title.height = myScale(data_z.title.height) + 'px'
    data_z.title.paddingLeft = myScale(data_z.title.paddingLeft) + 'px'
    data_z.title.paddingRight = myScale(data_z.title.paddingRight) + 'px'
    data_z.padding =  myScale(val.padding) + 'px'
    data_z.fontSize = myScale(data_z.fontSize) + 'px'
    data_z.tableFiled.forEach(element => {
        if (element.width > 0) {
            element.width = myScale(element.width)
        }
    });
    return data_z
}

const propsDataEv = (val) => {
    console.log('收到修改的内容')
    console.log(val)
    Object.assign(props.data, val)
    console.log(props.data.nameFontColor)
    emit('aaaa')
}


const tableData = ref([
    {
        sys_date: '2016-05-03',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    },
    {
        sys_date: '2016-05-02',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    },
    {
        sys_date: '2016-05-04',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    },
    {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    }, {
        sys_date: '2016-05-01',
        name: 'Tom',
        spc: 'No. 189, Grove St, Los Angeles',
    },

])

const tableFiled = ref([])
let timer = null;
let tableRef = ref(null);

onMounted(() => {
    getDataEv()
})

// 奇偶背景颜色
const tableRowStyle = ({
    rowIndex,
}) => {
    if (rowIndex % 2 == 0) {
        return { 'background-color': formatData.value.evenBackgroundColor + ' !important' }
    } else {
        return { 'background-color': formatData.value.oddBackgroundColor + ' !important' }
    }
}
// 表头背景颜色
const headerRowStyle = () => {
    return { 'background-color': formatData.value.headerBackgroundColor + ' !important' }
}

// 滚动方法
const startTimerEv = () => {

    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    if (tableData.lenght == 0) {
        emit("dbRowBasicList", 5000)
        return
    }
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
    // console.log(scrollDom)
    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });

    // 设置每秒滚动一行
    timer = setInterval(() => {

        if (status) {
            // 设置每次滚动的像素
            scrollDom.scrollTop += 20;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
                scrollDom.scrollTop = 0;
                console.log('滚动完成-重新加载数据')
                getDataEv()
            }
        }

    }, props.data.time * 1000);
}


const getDataEv = async () => {
    console.log('表格数据')
    if (props.data.sql == '') {
        return
    }
    if (props.data.pool == '') {
        return
    }
    let data = {}
    data.pool = props.data.pool
    data.sql = props.data.sql
    data.components = props.data.components
    try {
        let arr_data = await ChartGetDataListPost(data)
        if (arr_data.status != 200) {
            return
        }
        tableData.value = arr_data.data.result
        // props.data.text.contentRight = arr_data.data.result.contentRight
    } catch (error) {
        ElMessage.error('表格数据查询接口异常' + error)
    } finally {
        startTimerEv()
    }
}

// // 启动定时器
// const startTimerEv = () => {


//     if (timer) clearInterval(timer);
//     // 设置每秒滚动一行
//     timer = setInterval(() => {

//         getDataEv()

//     }, props.data.time * 1000);
// }

onUnmounted(() => {
    // 组件卸载记得清除计时器
    if (timer) clearInterval(timer);
    timer = null;
})

defineExpose({
    tableData,
    tableFiled,
    startTimerEv
})

</script>

<style lang='less' scoped>
// 表身鼠标移上去背景颜色
@tr-table-row-hover-background-color: var(--hover-background-color);
// 表格字体颜色
@tr-table-color: var(--color);
@tr-table-font-size: var(--font-size);

.show-table {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.el-table {
    background-color: transparent;
}

:deep(.table-row-class-name) {
    background-color: transparent;
}



:deep(.table-header-row-class-name .el-table__cell) {
    background-color: transparent !important;
    border-bottom: transparent !important;
}



:deep(.el-table tr) {
    background-color: transparent !important;
}


:deep(.el-table tr:hover) {
    background-color: transparent !important;
}




:deep(.el-table__cell) {
    background-color: transparent !important;
    border-bottom: transparent !important;
    color: @tr-table-color;
    font-size: @tr-table-font-size;
}

:deep(.el-table__cell:hover) {
    background-color: @tr-table-row-hover-background-color !important;

}





:deep(.el-table td.el-table__cel) {
    border-bottom: transparent !important;
}

// 鼠标移动上去颜色
:deep(.el-table__row:hover) {
    background-color: @tr-table-row-hover-background-color !important;
}

.title {
    padding: 1px;
    box-sizing: border-box;
}



:deep(.el-table__inner-wrapper:before) {
    background-color: transparent !important;
}
</style>